<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function checkPhone(){
            let phone = document.getElementById("phone").value;
            let regExp = /^[1][35689]\d{9}$/;
            if(regExp.test(phone)){
                document.getElementById("s1").innerHTML = "<span style='color:green;'>手机号码格式正确</span>"
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red;'>手机号码格式错误</span>"
            }
        }

        function checkPersonId(){
            let personId = document.getElementById("personId").value;
            let regExp = /^\d{15}(\d{2}[0-9x])?$/i;
            if(regExp.test(personId)){
                document.getElementById("s2").innerHTML = "<span style='color:green;'>身份证号码格式正确</span>"
            } else{
                document.getElementById("s2").innerHTML = "<span style='color:red;'>身份证号码格式错误</span>"
            }
        }

        function checkEmail(){
            let email = document.getElementById("email").value;
            let regExp = /^[0-9a-z]\w+[@][0-9a-z]+(\.com)(\.cn)?$/i;
            if(regExp.test(email)){
                document.getElementById("s3").innerHTML = "<span style='color:green;'>电子邮箱格式正确</span>"
            } else{
                document.getElementById("s3").innerHTML = "<span style='color:red;'>电子邮箱格式错误</span>"
            }
        }

        function checkUsername(){
            let username = document.getElementById("username").value;
            let regExp = /^[0-9a-z][0-9a-z_.-]{2,16}[0-9a-z]$/i;
            if(regExp.test(username)){
                document.getElementById("s4").innerHTML = "<span style='color:green;'>用户名格式正确</span>"
            } else{
                document.getElementById("s4").innerHTML = "<span style='color:red;'>用户名格式错误</span>"
            }
        }
    </script>
</head>
<body>
<!--
1.在控制台输入一个手机号码,判断手机号码格式是否正确
    手机号码格式如果正确,则返回手机号码格式正确
    手机号码格式如果不正确,手机号码格式不正确,请重新输入,且必须重新输入,直到正确为止
    手机号码由11位数字组成,必须以13、15、16、18、19开头
-->
<input type="text" id="phone">
<button onclick="checkPhone()">校验手机号</button>
<span id="s1"></span><br><br><br>


<!--
2.在控制台输入一个身份证号码,判断身份证号码格式是否正确
    身份证号码只能是15位或者18位字符
    如果是15位,要求必须全部是数字
    如果是18位,要求前17位必须全部是数字,最后一位可以是数字或者X
-->
<input type="text" id="personId">
<button onclick="checkPersonId()">校验身份证号码</button>
<span id="s2"></span><br><br><br>


<!--
3.在控制台输入一个电子邮箱,判断电子邮箱格式是否正确
    要求邮箱必须以英文字母或者数字开头,后面可以跟英文字母数字或者下划线
    后面跟@符号,@符号后面跟英文字母或者数字
    以.com或者.com.cn结尾
-->
<input type="text" id="email">
<button onclick="checkEmail()">校验电子邮箱</button>
<span id="s3"></span><br><br><br>


<!--
4.在控制台输入一个用户名,判断用户名格式是否正确
    用户名由字母、数字、下划线、点、减号组成,只能以数字字母开头和结尾,长度4-18位
-->
<input type="text" id="username">
<button onclick="checkUsername()">校验用户名</button>
<span id="s4"></span><br><br><br>
</body>
</html>